<template>
	<view class="home">
	<view class="search">
			<text>花逸朵</text>
		<view>请输入关键词搜索</view>
	</view>
	<swiper indicator-dots="true"  indicator-active-color="#fff">
		<swiper-item>
			<image src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg" mode=""></image>
		</swiper-item>
	</swiper>
	<view class="list">
		<view v-for="item in navData" :key="item.id">
			<image :src="item.icon" mode=""></image>
			<text>{{item.title}}</text>
		</view>
	</view>
	<view class="gong">
		<div class="left">
			平台
			公告
		</div>
		<div class="right">各位的客户您好，受疫情影响暂停接单，所...</div>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navData:[
				{
				id:1,
				title:"基地直供",
				icon:"../../static/images/位置.png"
				},
				{
				id:2,
				title:"花逸朵",
				icon:"../../static/images/店铺.png"
				},
				{
				id:3,
				title:"用心服务",
				icon:"../../static/images/捧在手心.png"
				},
				{
				id:4,
				title:"售后保障",
				icon:"../../static/images/捧在手心.png"
				},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
		
.home{
	background-color: #f4f4f4;
	
	.search{
		padding: 0 30rpx;
		background-color: #1F1E1F;
		line-height: 100rpx;
			display: flex;
		align-items: center;
		text{
			color: #fff;
		}
		view{
			width: 300rpx;
			height: 50rpx;
            border-radius: 60rpx;
			text-align: center;
			background-color: #3F3E3F;
			color: #C1C1C1;
			margin-left: 40rpx;
			line-height: 50rpx;
		}
	}
		
	swiper{
	
		margin-top: 20rpx;
		padding: 0 30rpx;
		height: 300rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}
		
	.list{
		padding: 0 30rpx;
			display: flex;
			justify-content: space-around;
			color: #C1C1C1;
				
			view{
				display: flex;
				align-items: center;
			}
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
	
}

</style>
